<template>
  <el-table
    :data="get_menuList"
    border
    style="width: 100%"
    row-key="id"
    default-expand-all
  >
    <el-table-column prop="id" label="菜单编号" width="100px" />
    <el-table-column prop="title" label="菜单名称" />
    <el-table-column prop="pid" label="上级菜单" />
    <el-table-column prop="icon" label="菜单图标" />
    <el-table-column prop="url" label="菜单地址" />
    <el-table-column prop="status" label="状态">
      <template #default="scope">
        <el-button
          size="default"
          type="success"
          plain
          v-if="scope.row.status == 1"
          >启用</el-button
        >
        <el-button size="default" type="danger" plain v-else>禁用</el-button>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" size="default" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" size="default" @click="delItem(scope.row.id)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
  
  <script setup>
import { defineEmits, computed, onMounted } from "vue";
import { useStore } from "vuex";
import { ElMessage, ElMessageBox } from "element-plus";
import { menudelete } from "@/request/api.js";

let store = useStore();

//----------定义数据------------
let get_menuList = computed(() => store.getters["menu/get_menuList"]);

//-------------定义方法--------------
//1.子传父，编辑
let emit = defineEmits("edit");
function edit(id) {
  emit("edit",id);
}

//2.请求数据
onMounted(() => {
  store.dispatch("menu/action_menuList");
});

//3.删除一项
function delItem(id) {
  ElMessageBox.confirm("确实删除这一项吗?", "Warning", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await menudelete({ id });
      if (res.code == 200) {
        ElMessage.success(res.msg);
        store.dispatch("menu/action_menuList");
      } else {
        ElMessage.error(res.msg);
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除",
      });
    });
}
</script>
  
  <style>
</style>